<template>
  <view class="cc-input-container">
    <input class="input-body" :style="{height: height, 'line-height': height, 'font-size': fontSize}" :auto-focus="true"
      :maxlength="maxlength" :adjust-position="false" :value="value" :ignoreCompositionEvent="false"
      @input.prevent="changeInput" @blur.prevent="changeInput">
    <view class="textarea-placeholder" :style="{'line-height': height, 'font-size': fontSize}" v-show="value === ''">
      {{placeholder}}
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        required: true
      },
      // 占位文字
      placeholder: {
        type: String,
        default: ''
      },
      // 字数限制个数
      maxlength: {
        type: Number,
        default: 140
      },
      // 输入框高度
      height: {
        type: String,
        default: ''
      },
      fontSize: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },
    methods: {
      changeInput: function(e) {
        this.$emit('input', e.detail.value)
      }
    }
  }
</script>

<style lang="scss">
  .cc-input-container {
    position: relative;
    width: 100%;

    .input-body {
      box-sizing: border-box;
      width: 100%;
      font-size: 24rpx;
      color: #000;
    }

    .textarea-placeholder {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 24rpx;
      color: #00000080;
    }
  }
</style>